<% content_for :title, t("circuitverse.contribute.title") %>

<div class="container">
  <div class="row center-row">
    <div class="col col-sm col-md col-lg">
      <h1 class="main-heading"><%= t("circuitverse.contribute.main_heading") %></h1>
        <p class="main-description"><%= t("circuitverse.contribute.main_description") %></p>
        <p class="centered-paragraph"><%= t("circuitverse.contribute.submain_description") %></p>
    </div>
  </div>
  <div class="row center-row">
    <div class="col col-sm col-md col-lg">
      <div class="social-card contribute-social-card">
        <a class="about-social-anchor" href="mailto:support@circuitverse.org" target="_blank">
          <%= image_tag "svgs/email.svg", height: "60", width: "60", alt: "Email Icon", class: "social-card-image" %>
          <h6><%= t("email_us_heading") %></h6>
          <p>support@circuitverse.org</p>
        </a>
      </div>
      <div class="social-card contribute-social-card">
        <a class="about-social-anchor" href="<%= Rails.configuration.slack_url %>" target="_blank">
          <%= image_tag "svgs/slack.svg", height: "60", width: "60", alt: "Slack Logo", class: "social-card-image" %>
          <h6><%= t("join_at_slack_heading") %></h6>
          <p><%= t("join_at_slack_description") %></p>
        </a>
      </div>
      <div class="social-card contribute-social-card">
        <a class="about-social-anchor" href="https://github.com/CircuitVerse" target="_blank">
          <%= image_tag "svgs/github.svg", height: "60", width: "60", alt: "Github Logo", class: "social-card-image" %>
          <h6><%= t("circuitverse.contribute.contribute_at_github_heading") %></h6>
          <p><%= t("circuitverse.contribute.contribute_at_github_description") %></p>
        </a>
      </div>
    </div>
  </div>
  <hr>

  <div class="row center-row">
    <div class="col col-sm col-md col-lg">
      <h2 class="submain-heading"><%= t("circuitverse.contribute.how_to_support_heading") %></h2>
    </div>
  </div>
  <div class="row center-row gy-5">
  <%= render(Contribute::CardComponent.new(
      image_src: "svgs/student.svg",
      alt_text: "Student Icon",
      title_key: "circuitverse.contribute.student_card.main_heading",
      items: [
        "circuitverse.contribute.student_card.item1_text",
        "circuitverse.contribute.student_card.item2_text_html",
        "circuitverse.contribute.student_card.item3_text"
      ]
    )) %>
    <%= render(Contribute::CardComponent.new(
      image_src: "svgs/professor.svg",
      alt_text: "Professor Icon",
      title_key: "circuitverse.contribute.teacher_card.main_heading",
      items: [
        "circuitverse.contribute.teacher_card.item1_text",
        "circuitverse.contribute.teacher_card.item2_text",
        "circuitverse.contribute.teacher_card.item3_text"
      ]
    )) %>
    <%= render(Contribute::CardComponent.new(
      image_src: "svgs/coder.svg",
      alt_text: "Developer Icon",
      title_key: "circuitverse.contribute.developer_card.main_heading",
      items: [
        "circuitverse.contribute.developer_card.item1_text",
        "circuitverse.contribute.developer_card.item2_text",
        "circuitverse.contribute.developer_card.item3_text"
      ],
      column_classes: "col-12 col-sm-12 col-md-12 col-lg-4"
    )) %>
  </div>
  <%= render(
    Donation::DonationCardComponent.new(
      image_path: "logos/opencollective-logo.png",
      link: "https://opencollective.com/CircuitVerse/contribute",
      alt_text: "Open Collective Logo",
      description: t("circuitverse.contribute.donate_through_open_collective")
    )
  ) %>
